<template>
  <div class="search-wrapper">
    <!-- 头部搜索 -->
    <mt-search></mt-search>
    <!--左边列表项  -->
    <div class="list-wrapper">
      <ul>
        <li
          v-for="(item,index) in searchData"
          :key="index"
          :class="{on:index===currentIndex}"
          ref="childLi"
        >{{item.name}}</li>
      </ul>
    </div>
    <!-- 右边内容区域 -->
    <div class="goods-wrapper">
      <ul ref="ulPar">
        <!-- 分类名称 -->
        <li v-for="(goods,index) in searchData" :key="index" class="goods-classify">
          <div class="classify-info">
            <span>{{goods.name}}</span>
            <span>更多分类..</span>
          </div>
          <ul>
            <li
              v-for="(item,index) in goods.foods"
              :key="index"
              class="goods-item"
              v-if="item.image_path.length>0"
            >
              <span>
                <img :src="'http://elm.cangdu.org/img/'+item.image_path" alt />
                <span class="item-name1">{{item.name}}</span>
              </span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Search } from "mint-ui";
Vue.component(Search.name, Search);
import BScroll from "better-scroll";
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodsY: Number,
      goodsLi: [0]
    };
  },
  mounted() {
    //发送获取数据
    this.$store.dispatch("getSearchData");
  },
  computed: {
    ...mapState(["searchData"]),
    // 滑动时触发
    currentIndex() {
      return this.goodsLi.findIndex((el, index) => {
        // this.leftScroll(index);
        return this.goodsY < this.goodsLi[index + 1] && this.goodsY >= el;
      });
    }
  },
  watch: {
    // 监视，当searchData改变时，执行以下的步骤
    searchData() {
      this.$nextTick(() => {
        this.list = new BScroll(".list-wrapper", {
          click: true,
          probeType: 3
        });
        this.goods = new BScroll(".goods-wrapper", {
          click: true,
          probeType: 2
        });
        this.goods.on("scroll", ({ x, y }) => {
          this.goodsY = Math.abs(y);
        });
        this.goods.on("scrollEnd", ({ x, y }) => {
          console.log(y);
          this.goodsY = Math.abs(y);
        });
        //列表已经获取完成，收集每一项的高度
        let allLIs = this.$refs.ulPar.childNodes;
        let liHeight = 0;
        Array.prototype.slice.call(allLIs).forEach(li => {
          liHeight += li.clientHeight;
          this.goodsLi.push(liHeight);
        });
        console.log(allLIs);
      });
    },
    //监视，当searchData改变时，执行以下的步骤
    value() {
      console.log("value is change", this.value);
    }
  },
  methods: {
    leftScroll(index) {
      let allLeftLis = this.$refs.childLi;
      console.log(allLeftLis);
      let el = allLeftLis[index];
      console.log("当前", el);
      this.list.scrollToElement(el, 300);
    }
  }
};
</script>
<style lang='scss' scoped>
.search-wrapper {
  display: flex;
  color: #666;
}
.mint-search {
  position: fixed;
  width: 100%;
}
.list-wrapper {
  flex: 2;
  height: 84vh;
  margin-top: 45px;
  overflow: hidden;
  text-align: center;
  li {
    margin: 15px;
  }
  .on {
    color: red;
  }
}
.goods-wrapper {
  flex: 8;
  border: 1px solid #f5f5f5;
  height: 84vh;
  margin-top: 45px;
  overflow: hidden;
  .goods-classify {
    display: flex;
    flex-flow: column;

    padding: 5px 15px;
    .classify-info {
      display: flex;
      justify-content: space-between;
    }
    ul {
      display: flex;
      flex-flow: wrap;
      .goods-item {
        width: 33%;
        margin-bottom: 10px;
        img {
          width: 100%;
          padding: 10px;
        }
        .item-name1 {
          width: 100%;
          height: 20px;
          display: block;
          text-align: center;
          font-size: 12px;
          overflow: hidden;
          line-height: 20px;
        }
      }
    }
  }
}
</style>